<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>个人中心</title>
    <link type="text/css" rel="stylesheet" href="../static/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/style.css">
</head>
<body class="uf uf-ver">
<a class="_back" href="javascript:goWinBack();"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
<div class="_titleTxt">个人中心</div>
<div class="uf uf-ver uf-ac">
    <div class="userImg uf uf-pc uf-ac">
        <img id="headimgurl" src="../static/img/userImg.jpeg"/>
    </div>
    <div id="nickname" class="userName">
        张三
        <!--loading状态 start-->
        <!--<i class="fa fa-spinner fa-pulse"></i>&nbsp;加载中...-->
        <!--loading状态 evf-->
    </div>
    <div class="areaTitle uf uf-ac uf-pc">
        <div class="flash-o"></div>
        充电记录
    </div>
    <div class="extraArea">
        <a href="javascript:chargeLayer();" class="eLink uf uc-ac uf-pe">
            <div>余额：<span>120</span>¥&nbsp;&nbsp;</div>
            <div class="chong uf uf-ac uf-pc">充</div>
        </a>
        <a href="bindCard.html" class="eLink uf uf-ac uf-pe">
            <div>绑卡</div>
            <div>&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i></div>
        </a>
        <a href="install.html" class="eLink uf uf-ac uf-pe">
            <div>装维</div>
            <div>&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i></div>
        </a>
    </div>
</div>
<div id="container" class="listDiv uf-f u-scroll">
    <div id="dropArea">
        <ul id="listUl">
            <li>
                <a href="pay.html">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div class="textPay">待支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;02小时01分钟</div>
                        <div>¥&nbsp;0.01</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已充值</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;无充电记录</div>
                        <div>¥&nbsp;10</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <div class="uf uf-pj">
                        <div>2018-12-29 15:16:56</div>
                        <div>已支付</div>
                    </div>
                    <div class="uf uf-pj">
                        <div><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;05小时03分钟</div>
                        <div>¥&nbsp;5</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="../static/js/jqToast.js"></script>
<script type="text/javascript" src="../static/js/tool.js"></script>
<script>

    //弹出充值框
    function chargeLayer() {
        //询问框
        layer.open({
            content: '充值金额：<input id="money" value="20" type="number" />&nbsp;&nbsp;元<div style="position: absolute;left: 0;right: 0;bottom: 60px;margin: auto;text-align: center;color: #FF0000;pointer-events: none;font-size: .725rem">充值后不可提现，请合理充值，用多少充多少</div>'
            , btn: ['充值', '取消']
            , yes: function (index) {
                var money = $("#money").val();
                if (!money) {
                    jqOpenToast('请输入金额');
                    return;
                }
                //todo 去充值
                alert('充值');
            }
        });
    }

    //弹出装维添加框
    // function addLayer() {
    //     //询问框
    //     layer.open({
    //         content: '<div class="uf uf-ac addLayLine">设备编号：<input id="dCode" class="uf-f" type="text" /><div class="iconF">&nbsp;<i class="fa fa-qrcode" aria-hidden="true"></i></div></div>' +
    //         '<div class="uf uf-ac addLayLine">装机地址：<input id="dAddress" class="uf-f" type="text" /><div onclick="openMap();" class="iconF">&nbsp;<i class="fa fa-map-marker" aria-hidden="true"></i></div></div>'
    //         , btn: ['录入', '取消']
    //         , yes: function (index) {
    //             var code = $("#dCode").val();
    //             var address = $("#dAddress").val();
    //             if (!code) {
    //                 jqOpenToast('请录入编号');
    //                 return;
    //             }
    //             if (!address) {
    //                 jqOpenToast('请录入地址');
    //                 return;
    //             }
    //
    //         }
    //     });
    // }
</script>
</body>
</html>